<template>
  <div>
    <template>
      <!-- 搜索框 -->
      <form class="el-form el-form--inline" v-if="formDisplay">
        <div class="search-container">
          <!-- 用户状态选择框 -->
          <div class="el-form-item el-form-item--medium">
            <label for="status" class="el-form-item__label">绑定状态</label>
            <div class="el-form-item__content">
              <el-select v-model="ZyOwnerRoom.roomStatus" placeholder="请选择绑定状态">
                <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="el-form-item el-form-item--medium">
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="interface(1)">搜索</el-button>
              <!-- 重置按钮 -->
              <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
            </div>
          </div>
        </div>
      </form>
    </template>


    <!-- 隐藏按钮 -->
    <el-tooltip content="隐藏" placement="top">
      <el-button icon="el-icon-search" circle @click="hide" class="search-button"></el-button>
    </el-tooltip>

    <!-- 重置按钮 -->
    <el-tooltip content="重置" placement="top">
      <el-button icon="el-icon-refresh" circle @click="reset" class="search-button"></el-button>
    </el-tooltip>


    <!--界面-->
    <el-table
        ref="multipleTable"
        :data="ZyOwners"
        tooltip-effect="dark"
        style="width: 100%">

      <el-table-column
          label="序号"
          width="100"
          align="center">
        <template slot-scope="scope">
          {{ computeIndex(scope.$index) }}
        </template>
      </el-table-column>

      <el-table-column
          prop="zyCommunity.communityName"
          label="小区名称"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="zyBuilding.buildingName"
          label="楼栋名称"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="zyUnit.unitName"
          label="单元名称"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="zyRoom.roomName"
          label="房间名称"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="ownerRealName"
          label="业主姓名"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          prop="ownerType"
          label="业主类型"
          width="180"
          align="center">
      </el-table-column>


      <el-table-column
          prop="zyOwnerRoomRecord.roomStatus"
          label="绑定状态"
          width="180"
          align="center">
        <template slot-scope="scope">
          {{ renderStatusText(scope.row.zyOwnerRoomRecord.roomStatus) }}
        </template>
      </el-table-column>


      <el-table-column
          prop="remark"
          label="备注"
          width="180"
          align="center">
      </el-table-column>

      <el-table-column
          label="操作"
          width="200"
          align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.zyOwnerRoom.roomStatus=='1' || scope.row.zyOwnerRoom.roomStatus=='2'"
                     type="text" @click="auditRecords(scope.row.ownerRealName)">
            <i class="el-icon-edit">审核记录</i>
          </el-button>
          <el-button v-if="scope.row.zyOwnerRoom.roomStatus=='0'" type="text"
                     @click="controls(scope.row.zyOwnerRoom.ownerRoomId)">
            <i class="el-icon-edit">操作</i>
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--    操作页面弹窗-->
    <el-dialog
        title="提示"
        :visible.sync="controls_window"
        width="30%"
        :before-close="handleClose">
      <span style="color: red;">是否为该用户进行绑定？</span>
      <el-form>
        <el-form-item label="审核意见">
          <el-input v-model="ideas" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="controlsNo">拒接绑定</el-button>
    <el-button type="primary" @click="controlsOk">确认绑定</el-button>
  </span>
    </el-dialog>

    <!--  分页-->
    <div class="block">
      <el-pagination
          @size-change="sizeTo"
          @current-change="pageTo"
          :current-page="current"
          :page-sizes="[1,5,10,20, 30, 40]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--审核记录弹窗-->
    <el-dialog :title="dialogTitle " :visible.sync="dialogFormVisibletianjia">
      <template>
        <el-table
            :data="ZyOwnerRoomRecords"
            style="width: 100%">

          <el-table-column
              label="序号"
              width="100"
              align="center">
            <template slot-scope="scope">
              {{ computeIndex(scope.$index) }}
            </template>
          </el-table-column>

          <el-table-column
              prop="ownerRealName"
              label="业主姓名"
              width="180"
              align="center">
          </el-table-column>

          <el-table-column
              prop="ownerType"
              label="业主类型"
              width="180"
              align="center">
          </el-table-column>


          <el-table-column
              prop="zyOwnerRoomRecord.roomStatus"
              label="绑定状态"
              width="180"
              align="center">
            <template slot-scope="scope">
              {{ renderStatusText(scope.row.zyOwnerRoomRecord.roomStatus) }}
            </template>
          </el-table-column>


          <el-table-column
              prop="zyOwnerRoomRecord.recordAuditOpinion"
              label="审核意见"
              width="180"
              align="center">
          </el-table-column>

          <el-table-column
              prop="zyOwnerRoomRecord.updateBy"
              label="审核人姓名"
              width="180"
              align="center">
          </el-table-column>

          <el-table-column
              prop="zyOwnerRoomRecord.recordAuditType"
              label="审核人类型"
              width="180"
              align="center">
          </el-table-column>

          <el-table-column
              prop="zyOwnerRoomRecord.remark"
              label="备注"
              width="180"
              align="center">
          </el-table-column>

        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    // 计算真实的序号
    computeIndex() {
      return (index) => {
        // 根据当前页数、每页条数和数据的索引计算真正的序号
        return (this.current - 1) * this.size + index + 1;
      };
    },
  },
  data() {
    return {
      dialogFormVisibletianjia: false,
      dialogTitle: "",
      ZyOwnerRoom: {"roomStatus": ""},
      ZyOwners: [],
      ZyOwnerRoomRecords: [],
      ownerRealNamea: "",
      current: 1,
      size: 5,
      pages: 1,
      total: 1,
      formDisplay: true,
      // 绑定状态
      statusOptions: [
        {
          value: '0',
          label: '审核中'
        },
        {
          value: '1',
          label: '已绑定'
        },
        {
          value: '2',
          label: '已拒绝'
        }],
      controls_window : false,
      ideas:"",
      ownerRoomId:"",

    }
  },
  methods: {
    renderStatusText(status) {
      switch (status) {
        case '0':
          return '审核中';
        case '1':
          return '绑定';
        case '2':
          return '审核失败';
        case '3':
          return '解绑';
        default:
          return '未知状态';
      }
    },
    // 折叠隐藏查询框
    hide() {
      this.formDisplay = !this.formDisplay
    },
    // //更改每页条数
    // sizeTo(size) {
    //   this.size = size;
    //   this.interface(1);
    // },
    //页码刷新
    pageTo(val){
      this.interface(val,this.size);
      this.current=val;
    },
    //条数刷新
    sizeTo(val){
      this.interface(this.current,val);
      this.size=val;
    },
    interface(current,size) {
      this.current = current;
      this.size = size;
      this.$axios.get('/zyOwner/findZyOwner?current=' + this.current + "&size=" + this.size + "&roomStatus=" + this.ZyOwnerRoom.roomStatus)
          .then(result => {
            if (result.data.data) {
              this.ZyOwners = result.data.data.records
              this.pages = result.data.data.pages
              this.total = result.data.data.total;
              console.log("条数：",result.data.data.total)
              console.log("数据：",this.ZyOwners)
            }
          })
    },
    // 审核记录
    auditRecords(ownerRealName) {
      console.log(ownerRealName)
      this.$axios.get('/zyOwner/findZyOwnerRoomRecord?ownerRealName=' + ownerRealName)
          .then(result => {
            if (result.data.data) {
              this.ZyOwnerRoomRecords = result.data.data
              console.log("审核记录")
              console.log(this.ZyOwnerRoomRecords)
            }
          })
      this.dialogTitle = '审核记录全过程'
      this.dialogFormVisibletianjia = true
    },
    // 刷新
    reset() {
      this.ZyOwnerRoom = {"roomStatus": ""}
      this.interface(1)
    },
    //操作弹窗x号点击事件
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    //点击操作
    controls(ownerRoomId) {
      console.log(ownerRoomId);
      this.ideas = "";
      this.ownerRoomId ="";
      this.ownerRoomId=ownerRoomId;
      this.controls_window = true;
    },
    //确认绑定
    controlsOk(){
      this.$axios.put("/zyOwnerRoom/controlsOk",{
        ownerRoomId:this.ownerRoomId,opinion:this.ideas,updateBy:localStorage.getItem("username")
      })
          .then(result =>{
            if (result.data.code==200){
              this.controls_window =false;
              this.interface(this.current,this.size);
              this.$message({
                type: 'success',
                message: result.data.data,
              });
            }
          })
    },
    //取消绑定
    controlsNo(){
      this.$axios.put("/zyOwnerRoom/controlsNo",{
        ownerRoomId:this.ownerRoomId,opinion:this.ideas,updateBy:localStorage.getItem("username")
      })
          .then(result =>{
            if (result.data.code==200){
              this.controls_window =false;
              this.interface(this.current,this.size);
              this.$message({
                type: 'success',
                message: result.data.data,
              });
            }
          })

    }

  },
  mounted() {
    this.interface(this.current,this.size)
  }
}
</script>

<style>

</style>

